<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FIND3 - dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-icon.png">
    <link rel="icon" type="image/png" href="static/img/favicon-32x32.png" sizes="32x32">
    <link rel="stylesheet" href="static/css/normalize.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/themify-icons.css">
    <link rel="stylesheet" href="static/css/flag-icon.min.css">
    <link rel="stylesheet" href="static/css/cs-skin-elastic.css">
    <!-- <link rel="stylesheet" href="static/css/bootstrap-select.less"> -->
    <link rel="stylesheet" href="static/scss/widgets.css">
    <link rel="stylesheet" href="static/scss/style.css">
    <link href="static/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/lib/datatable/dataTables.bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>



    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->

</head>

<body>


    <!-- Left Panel -->

    <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default">

            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="./">
                    <img src="static/img/find3-promo.png" alt="Logo">
                </a>
                <a class="navbar-brand hidden" href="./">
                    <img src="static/img/find_logo.png" alt="Logo">
                </a>
            </div>

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="/view/dashboard/{{.Family}}">
                            <i class="menu-icon fa fa-dashboard"></i>Dashboard </a>
                    </li>
                    <li>
                        <a href="https://www.internalpositioning.com/doc/" target="_blank">
                            <i class="menu-icon fa fa-book"></i>Docs </a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
    </aside>
    <!-- /#left-panel -->

    <!-- Left Panel -->

    <!-- Right Panel -->

    <div id="right-panel" class="right-panel">

        <div class="breadcrumbs">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>FIND dashboard</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    <div class="page-title">
                        <ol class="breadcrumb text-right">
                            <li class="active">Admin</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content mt-3">

            <div class="col-sm-12">
                <div class="alert  alert-success alert-dismissible fade show" role="alert">
                    You successfully read this important alert message.
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>


            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <strong>Passive scanning</strong>
                        <small>See
                            <a href="https://www.internalpositioning.com/doc/passive_tracking.md">the Passive tracking</a> document for information.</a>
                        </small>

                    </div>
                    <div class="card-body card-block">

                        <div class="row ">
                            <div class="col-sm-4 mb-4">
                                <h4 class="card-title mb-0">Current learning</h4>
                            </div>
                        </div>
                        <table id="bootstrap-data-table" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Device</th>
                                    <th>Location</th>
                                    <th>Last seen</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Tiger Nixon</td>
                                    <td>System Architect</td>
                                    <td>Edinburgh</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Tiger Nixon</td>
                                    <td>System Architect</td>
                                    <td>Edinburgh</td>
                                    <td>
                                        <button type="reset" class="btn btn-danger btn-sm">
                                            <i class="fa fa-ban"></i> Stop
                                        </button>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                        <hr>
                        <div class="row ">
                            <div class="col-sm-4 mb-4">
                                <h4 class="card-title mb-0">Toggle learning</h4>
                            </div>
                        </div>
                        <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="select" class=" form-control-label">Device</label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="text" id="deviceInput" name="deviceInput" placeholder="" class="form-control">
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="text-input" class="form-control-label">Location</label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="text" id="locationInput" name="locationInput" placeholder="" class="form-control">
                                    <small class="form-text text-muted">Optional</small>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="fa fa-dot-circle-o"></i> Start learning
                                    </button>

                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-12">
                                    <div class="alert  alert-success alert-dismissible fade show" role="alert">
                                        You successfully read this important alert message.
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>


            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-4">
                                <h4 class="card-title mb-0">Accuracy</h4>
                                <div class="small text-muted">Last calibrated March 12th, 2018</div>
                            </div>
                        </div>
                        <div class="content mt-3">
                            <div class="animated fadeIn">
                                <div class="row">

                                    <div class="col-lg-4 col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="stat-widget-four">
                                                    <div class="stat-icon dib">
                                                        <p class="data-attributes">
                                                            <span data-peity='{ "fill": ["#6164C1", "#eeeeee"], "innerRadius": 10, "radius": 20 }'>98/100</span>
                                                            98% </p>
                                                    </div>
                                                    <div class="stat-content">
                                                        <div class="text-left dib">
                                                            <div class="stat-heading">Overall</div>
                                                            <div class="stat-text">5,000 data</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="stat-widget-four">
                                                    <div class="stat-icon dib">
                                                        <p class="data-attributes">
                                                            <span data-peity='{ "fill": ["#6164C1", "#eeeeee"], "innerRadius": 10, "radius": 20 }'>98/100</span>
                                                            98% </p>
                                                    </div>
                                                    <div class="stat-content">
                                                        <div class="text-left dib">
                                                            <div class="stat-heading">Bathroom</div>
                                                            <div class="stat-text">128 data</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div class="col-md-12">
                <aside class="profile-nav alt">
                    <section class="card">
                        <div class="card-header user-header alt bg-dark">
                            <div class="media">
                                <div class="media-body">
                                    <h2 class="text-light display-6">android</h2>
                                    <p>Last seen
                                        <span id="timeago">2 seconds</span> ago</p>
                                </div>
                            </div>
                        </div>


                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                Bathroom
                                <span class="badge badge-primary pull-right">10%</span>
                                </a>
                            </li>
                        </ul>
                        <div class="card-footer">
                            <code id="latestdata">
                                {"asldkfj","asdflkj"}
                            </code>
                        </div>
                    </section>
                </aside>
            </div>



            <div class="content mt-3">
                <div class="animated fadeIn">
                    <div class="row">

                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <strong class="card-title">Devices</strong>
                                </div>
                                <div class="card-body">
                                    <p>Click on a device name to track it in realtime.</p>
                                    <table id="bootstrap-data-table" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Last location</th>
                                                <th>Last seen</th>
                                                <th>Active time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Tiger Nixon</td>
                                                <td>System Architect</td>
                                                <td>Edinburgh</td>
                                                <td>$320,800</td>
                                            </tr>
                                            <tr>
                                                <td>Tiger Nixon</td>
                                                <td>System Architect</td>
                                                <td>Edinburgh</td>
                                                <td>$320,800</td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <!-- .animated -->
            </div>
            <!-- .content -->




        </div>
        <!-- .content -->
    </div>
    <!-- /#right-panel -->

    <!-- Right Panel -->

    <script src="static/js/vendor/jquery-2.1.4.min.js"></script>
    <script src="static/js/popper.min.js"></script>
    <script src="static/js/plugins.js"></script>
    <script src="static/js/main.js"></script>

    <script src="static/js/lib/peitychart/jquery.peity.min.js"></script>
    <!-- scripit init-->
    <script src="static/js/lib/peitychart/peitychart.init.js"></script>

    <script src="static/js/lib/data-table/datatables.min.js"></script>
    <script src="static/js/lib/data-table/dataTables.bootstrap.min.js"></script>
    <script src="static/js/lib/data-table/dataTables.buttons.min.js"></script>
    <script src="static/js/lib/data-table/buttons.bootstrap.min.js"></script>
    <script src="static/js/lib/data-table/jszip.min.js"></script>
    <script src="static/js/lib/data-table/pdfmake.min.js"></script>
    <script src="static/js/lib/data-table/vfs_fonts.js"></script>
    <script src="static/js/lib/data-table/buttons.html5.min.js"></script>
    <script src="static/js/lib/data-table/buttons.print.min.js"></script>
    <script src="static/js/lib/data-table/buttons.colVis.min.js"></script>
    <script src="static/js/lib/data-table/datatables-init.js"></script>
    <script src="static/js/jquery.autocomplete.js"></script>






    <script type="text/javascript">
        (function ($) {
            $('#bootstrap-data-table-export').DataTable();



            $("#locationInput").autocomplete({
                lookup: [
                    "Andora",
                    "Something",
                    "Something else"
                ],
            });

            $("#deviceInput").autocomplete({
                lookup: [
                    "Zack's Device",
                    "Another device"
                ],
            });

        })(jQuery);
    </script>

    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        .autocomplete-group {
            padding: 2px 5px;
        }

        .autocomplete-group strong {
            display: block;
            border-bottom: 1px solid #000;
        }
    </style>
</body>

</html>